<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 200px;
            height: 300px;
            background: greenyellow;
        }

        .item {
            width: 200px;
            height: 100px;
            background: pink;
        }

        .dragOver {
            background: skyblue;
        }

        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container" id='container' ondragleave="dragleave(event)" ondragenter="dragenter(event)"
        ondrop="drop(event)" ondragover="dragover(event)"></div>
    <div class="item" draggable="true" ondragstart="dragStart(event)" id="item"></div>
    <img src="../imges/dog1.jpg" class="hidden" />
    <script>
        function dragStart(e) {
            e.dataTransfer.setData('id', e.target.id);
            let image = document.querySelector('img').cloneNode();
            image.classList.remove('hidden');
            e.dataTransfer.setDragImage(image, 200, 50);
        }

        function drop(e) {
            e.preventDefault();
            let id = e.dataTransfer.getData('id');
            e.target.appendChild(document.getElementById(id));
        }

        function dragover(e) {
            e.preventDefault();
            // e.target.classList.add('dragOver');
        }

        function dragleave(e) {
            console.log('leave');
            e.target.classList.remove('dragOver');
        }    
        function dragenter(e) {
            console.log('ENTER');
            e.target.classList.add('dragOver');
        }    
    </script>
</body>

</html>